GlitchAuroraKittenOceanicCitrusNoirHardstuck
Gallery
Theme matrix
Review every gallery entry and state across all Planner themes. The matrix reuses the component previews so screenshot and accessibility coverage stay in sync.
Buttons
AIAbortButton
Badge
Tone: Neutral, Accent, Primary, Top lane, Jungle, Mid lane, Bot lane, Support · Size: Small, Medium, Large, Extra large · State: Default, Interactive, Selected, Disabled, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Button
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
IconButton
Default
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Default variant
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Default hover
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Default active
Variant: Quiet, Neo, Default, Glitch · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay, Default variant, Default hover, Default active
GlitchAuroraKittenOceanicCitrusNoirHardstuck
SegmentedButton
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled link
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Inputs
Label
Default
State: Default, Hover, Focus-visible, Disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Select
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Field
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Invalid
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
With counter
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Select
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Input
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Custom ring
State: Default, Hover, Focus, Active, Disabled, Loading, Custom ring, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Glitch overlay
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
SearchBar
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
With label
State: Default, With label, Hover, Focus-visible, Active, Disabled, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Textarea
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Invalid
State: Default, Focus visible, Invalid, Loading, Disabled, With counter, Select, Search, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Read-only
State: Default, Hover, Focus-visible, Active, Invalid, Read-only, Disabled, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Prompts
PromptList
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Empty
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PromptsHeader
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Chip hover
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Chip focus-visible
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Chip pressed
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Chip disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Chip loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search hover
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search focus-visible
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search active
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search error
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search empty
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PromptsComposePanel
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Compose hover
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Compose focus-visible
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Compose active
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Compose disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Compose loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Compose error
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Compose empty
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PromptsDemos
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Planner
WeekPicker
GlitchAuroraKittenOceanicCitrusNoirHardstuck
BottomNav
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active tab
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover tab
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Keyboard focus
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled tab
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Syncing tab
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PlannerCalendar
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Error
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Cards
Card
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Error
GlitchAuroraKittenOceanicCitrusNoirHardstuck
NeoCard
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Error
GlitchAuroraKittenOceanicCitrusNoirHardstuck
SectionCard Variants
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Layout
PageShell
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Sheet
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Closed
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Opening / loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus trapped
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Confirm disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Modal
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Closed
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Opening / loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus trapped
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Confirm disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Split
GlitchAuroraKittenOceanicCitrusNoirHardstuck
TitleBar
GlitchAuroraKittenOceanicCitrusNoirHardstuck
HeaderTabs
State: Active, Inactive, Focus-visible, Disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Header
Tab state: Active, Inactive, Disabled · Underline tone: Neutral, Brand
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Page Header
NeomorphicHeroFrame
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Tabs — Hover
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Tabs — Focus-visible
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Tabs — Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PageHeader
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search — Focus-visible
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search — Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Search — Disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
DemoHeader
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Primary CTA — Hover
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Primary CTA — Focus-visible
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Primary CTA — Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Quiet CTA — Disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hero
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Sub tabs — Selected
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Sub tabs — Disabled
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Feedback
Progress
GlitchAuroraKittenOceanicCitrusNoirHardstuck
OutlineGlowDemo
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Snackbar
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Toast
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Skeleton
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Spinner
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AITypingIndicator
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Paused
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Minimal
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AIConfidenceHint
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Low
GlitchAuroraKittenOceanicCitrusNoirHardstuck
High
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AIRetryErrorBubble
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Acknowledged
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AIExplainTooltip
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Neutral surface
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Default open
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AILoadingShimmer
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AIErrorCard
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Toggles
Toggle
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
RadioIconGroup
Checked
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Unselected
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AnimationToggle
GlitchAuroraKittenOceanicCitrusNoirHardstuck
CheckCircle
GlitchAuroraKittenOceanicCitrusNoirHardstuck
TabBar
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Tabs
Layout: Panels, Controlled list · State: Active, Hover, Focus-visible, Disabled, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
RadioIconGroup
Checked
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Unselected
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
NeonIcon
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Accent (lit)
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Danger (lit)
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Danger (powerdown)
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Accent 2xl
State: Accent (lit), Danger (lit), Danger (powerdown), Accent 2xl
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Toggle
Default
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
State: Default, Hover, Active, Focus-visible, Disabled, Disabled link, Loading
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Homepage
DashboardCard
GlitchAuroraKittenOceanicCitrusNoirHardstuck
DashboardList
GlitchAuroraKittenOceanicCitrusNoirHardstuck
IsometricRoom
GlitchAuroraKittenOceanicCitrusNoirHardstuck
QuickActionGrid
GlitchAuroraKittenOceanicCitrusNoirHardstuck
HeroPlannerCards
GlitchAuroraKittenOceanicCitrusNoirHardstuck
AvatarFrame
GlitchAuroraKittenOceanicCitrusNoirHardstuck
HeroPortraitFrame
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PortraitFrame
GlitchAuroraKittenOceanicCitrusNoirHardstuck
WelcomeHeroFigure
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Reviews
ReviewSurface
GlitchAuroraKittenOceanicCitrusNoirHardstuck
ReviewSliderTrack
GlitchAuroraKittenOceanicCitrusNoirHardstuck
ScoreMeter
GlitchAuroraKittenOceanicCitrusNoirHardstuck
ReviewListItem
GlitchAuroraKittenOceanicCitrusNoirHardstuck
LaneOpponentForm
GlitchAuroraKittenOceanicCitrusNoirHardstuck
ResultScoreSection
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PillarsSelector
GlitchAuroraKittenOceanicCitrusNoirHardstuck
TimestampMarkers
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Goals
GoalsProgress
GlitchAuroraKittenOceanicCitrusNoirHardstuck
GoalListDemo
GlitchAuroraKittenOceanicCitrusNoirHardstuck
RemindersTab
GlitchAuroraKittenOceanicCitrusNoirHardstuck
TimerRing
GlitchAuroraKittenOceanicCitrusNoirHardstuck
TimerTab
GlitchAuroraKittenOceanicCitrusNoirHardstuck
ProgressRingIcon
GlitchAuroraKittenOceanicCitrusNoirHardstuck
TimerRingIcon
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Team
SideSelector
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
ChampListEditor
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / editing
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PillarBadge
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
PillarSelector
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
RoleSelector
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Components
ThemePicker
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
BackgroundPicker
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
SettingsSelect
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
ThemeToggle
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Hover
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Focus-visible
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Active / selected
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Disabled
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Loading
Tone: Primary, Accent, Info, Danger · Size & icons: Small, Medium, Large, Extra large · State: Default, Hover, Focus, Active, Disabled, Loading, Glitch overlay
GlitchAuroraKittenOceanicCitrusNoirHardstuck
Misc
HeroImage
GlitchAuroraKittenOceanicCitrusNoirHardstuck
CatCompanion
GlitchAuroraKittenOceanicCitrusNoirHardstuck